<template>
	<view>
		<uni-card :is-shadow="false" is-full>
			<text class="uni-h6">折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用，折叠不重要的内容，显示重要内容。点击可以展开折叠部分。</text>
		</uni-card>
		<Section title="基础用法" type="line">
			<uni-collapse ref="collapseRef" v-model="value" @change="change">
				<uni-collapse-item title="默认开启" >
					<view class="content">
						<text class="text">{{content}}</text>
					</view>
				</uni-collapse-item>
				<uni-collapse-item title="折叠内容">
					<view class="content">
						<text class="text">折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段文字。再次点击标题，折叠内容。</text>
					</view>
				</uni-collapse-item>
				<uni-collapse-item title="禁用状态" disabled>
					<view class="content">
						<text class="text">禁用状态内容主体，页面上是看不到这段话的。</text>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</Section>

		<button class="button" type="primary" @click="add">动态修改内容</button>
		<!-- TODO app 端默认不使用动画，app在使用高度动画的时候会有性能开销问题，所以应该要酌情使用 -->
		<Section title="使用动画效果" type="line">
			<uni-collapse >
				<uni-collapse-item title="使用动画" :show-animation="true">
					<view class="content">
						<text class="text">默认开启组件动画，使用动画效果折叠内容会有一个从上到下的动画。</text>
					</view>
				</uni-collapse-item>
				<uni-collapse-item title="不使用动画" :show-animation="false">
					<view class="content">
						<text class="text">设置 show-animation="false",关闭当前组件动画效果。</text>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</Section>
		<Section title="手风琴效果（只会保留一个的打开状态）" type="line">
			<uni-collapse  accordion v-model="accordionVal" @change="change">
				<uni-collapse-item title="手风琴效果">
					<view class="content">
						<text class="text">手风琴效果同时只会保留一个组件的打开状态，其余组件会自动关闭。</text>
					</view>
				</uni-collapse-item>
				<uni-collapse-item title="手风琴效果">
					<view class="content">
						<text class="text">手风琴效果同时只会保留一个组件的打开状态，其余组件会自动关闭。</text>
					</view>
				</uni-collapse-item>
				<uni-collapse-item title="手风琴效果">
					<view class="content">
						<text class="text">手风琴效果同时只会保留一个组件的打开状态，其余组件会自动关闭。</text>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</Section>

		<Section title="配置图片" type="line">
			<uni-collapse>
				<uni-collapse-item title="标题文字"
					thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png">
					<view class="content">
						<text class="text">折叠内容主体，可自定义内容及样式</text>
					</view>
				</uni-collapse-item>
				<uni-collapse-item title="标题文字"
					thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png">
					<view class="content">
						<text class="text">折叠内容主体，可自定义内容及样式</text>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</Section>

		<Section title="使用插槽" type="line">
			<uni-collapse>
				<uni-collapse-item titleBorder="none">
					<template v-slot:title>
						<view>
							<view title="标题使用自定义标题插槽" :show-extra-icon="true" :extra-icon="extraIcon">
							</view>
						</view>
					</template>
					<view class="content">
						<text class="text">折叠内容主体，可自定义内容及样式</text>
					</view>
				</uni-collapse-item>
				<uni-collapse-item title="折叠内容使用 view 组件">
					<view>
						<view title="列表文字"></view>
						<view :disabled="true" title="列表文字" note="列表禁用状态"></view>
						<view title="列表右侧显示 switch" :show-switch="true"></view>
						<view :show-extra-icon="true" :extra-icon="extraIcon" title="列表左侧带扩展图标"></view>
						<view title="列表左侧带略缩图" note="列表描述信息"
							thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
							thumb-size="lg" rightText="右侧文字" showArrow></view>
						<view title="开启点击反馈" clickable showArrow @click="onClick"></view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</Section>
	</view>
</template>

<script setup>
import {ref, nextTick} from 'vue'

const collapseRef = ref(null)
const value = ref(['0'])
const accordionVal = ref('1')
const content = ref('折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。') 
const extraIcon = ref({
	color: '#4cd964',
	size: '26',
	type: 'image'
})

function add() {
	if (content.value.length > 35) {
		content.value = '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。'
	} else {
		content.value = '折叠内容主体，这是一段比较长内容。通过点击按钮修改后内容后，使组件高度发生变化，在次点击按钮恢复之前的内容和高度。'
	}
	// TODO 小程序中不支持自动更新 ，需要手动resize 更新组件高度
	// #ifdef MP
	nextTick(() => {
		this.$refs.collapse.resize()
	})
	// #endif
}
function onClick(e) {
	uni.showToast({
		title: '列表被点击'
	})
}
function change(e) {
	console.log(e);
}
</script>

<style scoped>
.example-body {
	flex-direction: column;
	flex: 1;
}

.content {
	padding: 15px;
}

.text {
	font-size: 14px;
	color: #666;
	line-height: 20px;
}

.button {
	margin: 10px;
	margin-bottom: 0;
}
</style>